import styles from '@/pages/Home/Home.less';
import { Card, Icon, Table } from 'antd';
import React from 'react';

const HotQuestionTable = (props) => {
  const columns = [
    {
      title: '知识点类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '10%',
    },
    {
      title: '知识点',
      dataIndex: 'question',
      key: 'question',
      width: '20%',
      align: 'center',
    },
    {
      title: '命中次数',
      dataIndex: 'num',
      key: 'num',
      align: 'center',
      width: '10%',
    },
    {
      title: '环比变化',
      dataIndex: 'ratio',
      key: 'ratio',
      align: 'center',
      width: '15%',
      render: records => {
        return <span>
          {records.ratio}
          {
            records.signal === 'up' ?
              <Icon type="arrow-up" style={{ color: '#75BAFF' }} />
              :
              <Icon type="arrow-down" style={{ color: '#FF7C7B' }} />
          }
        </span>
      }
    },
  ];

  return (
    <Card
      loading={props.loading}
      className={styles.salesCard}
      bordered={false}
      title={'热点问题'}
      bodyStyle={{ padding: 24, height: props.loading ? '' : 450, overflowY: 'auto', overflowX: 'hidden' }}
    >
      <Table
        columns={columns}
        dataSource={props.list}
        rowKey={(record, index) => index}
        pagination={{
          pageSize: 5
        }}
      />
    </Card>
  )
}

export default HotQuestionTable;
